<template>
	<view class="gt-form" v-if="template.items" :class="template.class || defaultClass"
		:style="template.style || defaultStyle">

		<view v-for="(item,index) in template.items" :key="index" v-if="item.type == 'submit'"
			:class="item.class || btnClass || 'btn'" :style="item.style || btnStyle || ''" @click="submit">
			{{item.label || ''}}</view>
		<view v-else-if="item.type == 'btn' || item.type == 'popup'" :class="item.class || btnClass || 'btn'"
			:style="item.style || btnStyle || ''" @click="clickBack(item)">{{item.label || ''}}</view>

		<view v-else-if="item.type == 'json'">
			<gt-form :template="item" v-model="formData[item.field]" :selectList="template.selectList"></gt-form>
		</view>

		<!-- json_array -->
		<view v-else-if="item.type == 'json_array'" v-for="(arrRow,arrIndex) in formData[item.field]" :key="arrIndex">
			<view class="row">
				<view class="row-auto">
					<gt-form :template="item" v-model="formData[item.field][arrIndex]" :selectList="selectList">
					</gt-form>
				</view>
				<view style="width: 38px;height: 38px;" @click="deleteJsonArrayRow(item.field,arrIndex)">
					<uni-icons v-if="arrIndex>0" type="minus-filled"
						style="color: red;font-size: 38px;line-height: 38px;cursor: pointer;"></uni-icons>
				</view>
			</view>
			<view v-if="formData[item.field].length -1 == arrIndex">
				<uni-icons @click="addJsonArrayRow(item.field,formData[item.field][0])" type="plus-filled"
					style="color: green;font-size: 38px;line-height: 38px;margin-top: 22px;cursor: pointer;">
				</uni-icons>
			</view>
		</view>
		<view v-else-if="item.type == 'array'">
			<view class="row align-center">
				<view class="gt-form-label-group">{{ item.label ? item.label : '' }}</view>
				<view class="row-auto">
					<view class="row mb-15" v-for="(arrRow,arrIndex) in formDataArray[item.field]" :key="arrIndex">
						<view class="row-auto">
							<gt-input v-model="formDataArray[item.field][arrIndex]" class=""></gt-input>
						</view>
						<view style="width: 38px;height: 38px;" @click="deleteArrayRow(arrIndex,item)">
							<uni-icons type="minus-filled"
								style="color: red;font-size: 38px;line-height: 38px;cursor: pointer;"></uni-icons>
						</view>
					</view>
					<view class="mb-30">
						<uni-icons @click="addArrayRow(item)" type="plus-filled"
							style="color: #4fb9ff;font-size: 38px;line-height: 38px;margin-top: 22px;cursor: pointer;">
						</uni-icons>
					</view>
				</view>
				
			</view>
			
		</view>

		<gt-select-simple v-else-if="item.type == 'select'" :label="item.label ? item.label : ''"
			v-model="formData[item.field]" :class="item.class || defaultChildClass"
			:style="item.style || defaultChildStyle" :list="item.list || selectList[item.field] || []"
			:error="item.error || ''"></gt-select-simple>

		<gt-select-tab v-else-if="item.type == 'select-tab'" :label="item.label ? item.label : ''" :all="item.all || ''"
			v-model="formData[item.field]" :field="item.field" :class="item.class || ''"
			:style="item.style || defaultChildStyle" :list="selectList[item.field] || []" :error="item.error || ''"
			@input="inputChange"></gt-select-tab>

		<gt-select-search v-else-if="item.type == 'select-search'" type="search" v-model="formData[item.field]"
			:url="item.url" :class="item.class || defaultChildClass" :style="item.style || defaultChildStyle"
			:required="item.required ? true : false" :label="item.label ? item.label : ''"
			:placeholder="item.placeholder ? item.placeholder : ''" :field="item.field" :desc="item.desc || ''"
			:error="item.error || ''" :icon="item.icon" :leftIcon="item.leftIcon" :leftText="item.leftText"
			:rightIcon="item.rightIcon" :rightText="item.rightText" @input="inputChange"></gt-select-search>

		<gt-select-date v-else-if="item.type == 'select-date'" type="search" v-model="formData[item.field]"
			:class="item.class || defaultChildClass" :style="item.style || defaultChildStyle"
			:required="item.required ? true : false" :label="item.label ? item.label : ''"
			:placeholder="item.placeholder ? item.placeholder : ''" :field="item.field" :desc="item.desc || ''"
			:error="item.error || ''" :icon="item.icon" :leftIcon="item.leftIcon" :leftText="item.leftText"
			:rightIcon="item.rightIcon" :rightText="item.rightText" @input="inputChange"></gt-select-date>

		<gt-upload v-else-if="['img','uploader','upload'].indexOf(item.type) != -1" v-model="formData[item.field]"
			:limit="item.limit || 999" :class="item.class || defaultChildClass" :style="item.style || defaultChildStyle"
			:required="item.required ? true : false" :fileType="item.fileType" :label="item.label ? item.label : ''"
			:placeholder="item.placeholder ? item.placeholder : ''" :field="item.field" :desc="item.desc || ''"
			:error="item.error || ''" :icon="item.icon" :leftIcon="item.leftIcon" :leftText="item.leftText"
			:rightIcon="item.rightIcon" :rightText="item.rightText" @input="inputChange"></gt-upload>

		<input v-else-if="item.type == 'hidden'" v-model="formData[item.field]" style="display: none;"></input>
		<view v-else-if="item.type == 'label'" class="c-assist t-w mb-10 t-md mt-15" :class="item.class">
			{{ item.label || '' }}</view>
		<gt-input v-else v-model="formData[item.field]" :class="item.class || defaultChildClass"
			:style="item.style || defaultChildStyle" :required="item.required ? true : false"
			:label="item.label ? item.label : ''" :placeholder="item.placeholder ? item.placeholder : ''"
			:field="item.field" :desc="item.desc || ''" :error="item.error || ''" :icon="item.icon"
			:leftIcon="item.leftIcon" :leftText="item.leftText" :rightIcon="item.rightIcon" :rightText="item.rightText"
			@input="inputChange"></gt-input>

		<slot></slot>
	</view>

</template>

<script>
	export default {
		name: "gt-form",
		model: {
			prop: 'formData',
			event: 'change'
		},
		props: {
			template: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			},
			selectList: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			},
			formData: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			},
			defaultClass: {
				type: String,
				default: function() {
					return '';
				}
			},
			defaultStyle: {
				type: String,
				default: function() {
					return '';
				}
			},
			btnClass: {
				type: String,
				default: function() {
					return '';
				}
			},
			btnStyle: {
				type: String,
				default: function() {
					return '';
				}
			},
			defaultChildClass: {
				type: String,
				default: function() {
					return '';
				}
			},
			defaultChildStyle: {
				type: String,
				default: function() {
					return '';
				}
			}
		},
		created() {
			this.changeFormData(this.template);
		},
		data() {
			return {
				formDataArray: {},
			}
		},
		computed: {

		},
		watch: {},
		methods: {
			clickBack(item) {
				this.$emit('clickBack', item)
			},
			addJsonArrayRow(field, row) {
				let formData = {
					...this.formData
				};
				row = {
					...row
				};
				for (let i in row) {
					row[i] = '';
				}
				formData[field].push(row);
				this.$emit('change', formData);
			},
			deleteJsonArrayRow(field, index) {
				let formData = {
					...this.formData
				};
				formData[field].splice(index, 1);
				this.$emit('change', formData);
			},
			addArrayRow(item){
				let formDataArray = {};
				for(let i in this.formDataArray){
					let row = this.formDataArray[i];
					if(item.field == i) row.push('');
					formDataArray[i] = row;
				}
				this.formDataArray = formDataArray;
			},
			deleteArrayRow(index,item){
				let formDataArray = {};
				for(let i in this.formDataArray){
					let row = this.formDataArray[i];
					if(item.field == i) row.splice(index,1);
					formDataArray[i] = row;
				}
				this.formDataArray = formDataArray;
			},
			submit() {
				let _this = this;
				let formData = {
					...this.formData
				};
				if (this.template.url && this.template.items) {
					for (let i in this.template.items) {
						let row = this.template.items[i];
						if (row.field && !formData[row.field]) {
							formData[row.field] = '';
						}
					}
					for (let index in formData) {
						if (typeof formData[index] == 'object') {
							formData[index] = JSON.stringify(formData[index]);
						}
					}
					for(let x in this.formDataArray){
						let row = this.formDataArray[x];
						formData[x] = row.join(',');
					}
					this.$emit('change', formData);
					console.log(this.template)
					this.$post({
						url: this.template.url,
						data: formData,
						type: this.template.requestType || 'POST',
						_this: this,
						afterFun(r) {
							_this.$emit('submit', {
								response: r,
								data: formData
							});
						}
					});
				}
				_this.$emit('submit', {
					data: formData
				});
			},
			changeFormData(newData) {
				console.log(newData)
				let formData = {
					...this.formData
				};
				for (let i in newData) {
					let row = newData[i]
					if (row.field && !formData.hasOwnProperty(row.field)) {
						formData[row.field] = '';
					}

				}
				for (let x in this.template.items) {
					let row = this.template.items[x];
					if (row.type == 'array') {
						this.formDataArray[row.field] = formData[row.field].split(',');
					}
				}
				this.$emit('change', formData);
			},
			inputChange(val, field) {
				// console.log(val, field)
				let formData = {
					...this.formData
				};
				formData[field] = val;
				this.$emit('input', formData);
			}
		}
	}
</script>

<style>
	.uni-picker-item {
		text-align: left !important;
		padding: 0 15px;
	}
</style>